{template 'web/common/header'}
<style>
    @font-face {font-family: 'layui-icon';
  src: url('../addons/xn_erp/images/layuiadmin/layui/font/TreeGrid/iconfont.eot?v=220');
  src: url('../addons/xn_erp/images/layuiadmin/layui/font/TreeGrid/iconfont.eot?v=220#iefix') format('embedded-opentype'),
  url('../addons/xn_erp/images/layuiadmin/layui/font/TreeGrid/iconfont.svg?v=220#iconfont') format('svg'),
  url('../addons/xn_erp/images/layuiadmin/layui/font/TreeGrid/iconfont.woff?v=220') format('woff'),
  url('../addons/xn_erp/images/layuiadmin/layui/font/TreeGrid/iconfont.ttf?v=220') format('truetype');
}
</style>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <span>{$title}</span>
                    <button class="layui-btn layui-btn-sm" data-type="Add" id="Add" onclick="add(null);">增加</button>
                    <button class="layui-btn layui-btn-sm" data-type="addnew" id="addnew">增加2</button>
                    <button class="layui-btn layui-btn-sm" data-type="shuaxin" id="shuaxin" onclick="reload();">刷新</button>
                </div>
                <div class="layui-card-body">
                    <table id="treeTable" lay-filter="treeTable"></table>
                    <script type="text/html" id="goods-category-bar">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../addons/xn_erp/images/layuiadmin/layui/layui.js"></script>
<script>
    var editObj = null, ptable = null, treeGrid = null, tableId = 'treeTable', layer = null;
    layui.config({
        base: '../addons/xn_erp/images/layuiadmin/layui/extend/'
    }).extend({
        treeGrid: 'treeGrid'
    }).use(['jquery', 'treeGrid', 'layer'], function () {
        var $ = layui.$;
        treeGrid = layui.treeGrid;//很重要
        layer = layui.layer;
        treeGrid.render({
            id: tableId
            , elem: '#' + tableId
            , url: '{$url}&type=goods&api=list'
            , cellMinWidth: 100
            , idField: 'id'//必須字段
            , treeId: 'id'//树形id字段名称
            , treeUpId: 'pid'//树形父id字段名称
            , treeShowName: 'name'//以树形式显示的字段
            // ,heightRemove:[".dHead",10]//不计算的高度,表格设定的是固定高度，此项不生效
            // , height: '100%'
            , skin: "nob"
            , isFilter: false
            , iconOpen: true//是否显示图标【默认显示】
            , isOpenDefault: false//节点默认是展开还是折叠【默认展开】
            , loading: true
            , method: 'post'
            , isPage: false
            , cols: [[
                { field: 'sort', width: 80, title: '排序', width: 80, edit: 'text', align: 'center' }
                , { field: 'name', title: '分类名称', edit: 'text' }
                , { field: 'id', title: 'id' }
                , { field: 'pid', title: 'pid' }
                , { field: 'childids', title: 'childid' }
                , { field: 'level', title: 'level' }
                , { width: 140, title: '操作', align: 'center', toolbar: '#goods-category-bar' }
            ]]
            // , parseData: function (res) {//数据加载后回调
            //     return res;
            // }
            // ,onClickRow:function (index, o) {
            //     console.log(index,o,"单击！");
            // }
            , onDblClickRow: function (index, o) {
                console.log(index, o, "双击");
            }
        });

        treeGrid.on('tool(' + tableId + ')', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {//删除行
                if (data.name) {
                    layer.confirm('真的删除行么,如果存在下级节点则一并删除，此操作不能撤销！', function (index) {
                        $.post("{$url}&api=del", { cid: data.id }, function (result) { layer.msg(result); });
                        obj.del();
                        layer.close(index);
                    });
                } else {
                    obj.del();
                }
            } else if (obj.event === "add") {//添加行
                // console.log(obj);
                add(obj);
            }
        });

        //监听单元格编辑
        treeGrid.on('edit(treeTable)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            // console.log(obj);
            api = data.api ? data.api : 'edit';
            console.log(data);
            $.post("{$url}&type=goods&api=" + api, { cid: data.id, pid: data.pid, sort: data.sort, level: data.lay_level, name: data.name}, function (result) {
                // console.log(result);
                // reload();
                layer.msg(result);

                console.log(api);
            });
        });

        $('#addnew').on('click', function () {
            layer.prompt({ title: '请输入商品分类', offset: '300px' }, function (value, index, elem) {
                // layer.msg(value);
                $.post("{$url}&type=goods&api=add", { pid: 0, sort: 0, level: 1, name: value }, function (result) {
                    // console.log(result);
                    reload();
                    layer.msg(result);
                });
                layer.close(index);
            });
        });

    });

    var i = "{$cid}";
    function add(pobj) {
        var pdata = pobj ? pobj.data : null;
        console.log(pobj);
        var param = {};
        param.name = '';
        param.api = 'add';
        param.id = ++i;
        param.sort = 0;
        param.pid = pdata ? pdata.id : 0;
        treeGrid.addRow(tableId, pdata ? pdata[treeGrid.config.indexName] + 1 : 0, param);
    }

    function reload() {
        treeGrid.query(tableId, {
            // page: {
            //     curr: 1
            // }
        });
    }

</script>
</body>

</html>